<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewPort" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- imPassword css js jq -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = 'css/bootstrap.min.css') }}">
    <script src="{{ url_for('static',filename='jQuery/jquery.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/poper.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
    <!-- echarts js -->
    <script src="{{ url_for('static',filename='js/echarts.min.js') }}"></script>
    <link href="{{ url_for('static',filename='img/icon/compute.ico') }}" rel="shortcut icon">
    <title>Virtual_Analyzer</title>
</head>
<body class="bg-white" style="width: 100%;height: 100%;">
    <div class="fixed-top bg-white">
        <nav class="navbar navbar-expand-lg navbar-light shadow p-1 mb-1 bg-white rounded">
            <div width="30" height="30" class="d-inline-block bg-white align-top"></div>
            <img src="../static/img/icon/电脑.png" width="30" height="30" class="d-inline-block align-top" alt="">
            <div style="width: 10px;" class="bg-white"></div>
            <a class="navbar-brand bg-white" href="../">虚拟能谱分析仪</a>
            <button class="navbar-toggler bg-white" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon bg-white"></span>
            </button>
            <div class="collapse navbar-collapse bg-white" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="../">主页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">窗口</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">工具</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="../help">帮助</a>
                    </li>
                </ul>
            </div>
            <button class="btn btn-light btn-outline-secondary" type="button" value="0" id="themeChange" onclick="changeColor()">
                深色模式
            </button>
        </nav>
    </div>
    <div style="height: 70px;" class="bg-white"></div>
    <div class="d-flex justify-content-start bg-white">
        <div id="list-ex" class="list-group" style="width: 450px;">
            <a class="list-group-item list-group-item-action" href="#list-item-1">界面介绍</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">图表操作</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">算法介绍</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">联系我们</a>
        </div>
        <div style="width: 50px;" class="bg-white"></div>
        <div data-spy="scroll" data-target="#list-ex" data-offset="0">
            <h4 id="list-item-1">界面介绍</h4>
            <div id="carouselExampleControls" class="carousel slide" style="width:800px;height:400px;color: #FFFFFFFF;" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="static/img/picture/全.png" style="width:800px;height:400px;" class="d-block w-100" alt="...">
                    </div>
                  <div class="carousel-item">
                    <img src="static/img/picture/图表工作区.png" style="width:800px;height:400px;" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="static/img/picture/区域选取.png" style="width:800px;height:400px;" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="static/img/picture/标线操作.png" style="width:800px;height:400px;" class="d-block w-100" alt="...">
                  </div>
                </div>
                <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
                    <span class="carousel-control-prev-icon"  aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </button>
            </div>
            <p>  界面由导航栏，图表操作区，标线操作区，选中区间操作区，和模块化功能区构成。</p>
            <p>  充分考虑到用户使用的方便，结合对matlib和python自带一些图形工具的使用经验，优化了对图表的整体操作，增加防误触功能，完善了相应的bug。
                界面整体简洁清晰化，导航栏部分用于调整部分特殊功能的窗口显示，未来将添加能谱自动识别，自动生成能谱分析报告，提高对目前能谱算法的准确性。
                图表操作区采用echarts，但是功能模块是由我自定义的，其中我添加了标线按钮、区间查找按钮、b样条曲线按钮、锁定放大按钮、数据获取按钮。
                标线操作区，主要是对用户添加的标线进行相应的操作，类似于示波器的标线旋钮、最多设置9条标线。
                选中区间操作区主要是对区间范围的数据进行处理，具有自动的峰值匹配和计数计算，还有很好的调节功能。
                模块化功能区尚未完成，主要是对部分用户友好功能服务，调节量程和x轴区间、刻度和线宽等，其中还添加了用户自定义文件的读取与处理，更方便用于远程分析。
                还具有深色模式，让用户在黑夜中也能很好的分析数据。
            </p>
            <h4 id="list-item-2">图表操作</h4>
            <div id="c" class="carousel slide" style="width:800px;height:400px;color: #FFFFFFFF;" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#c" data-slide-to="0" class="active"></li>
                    <li data-target="#c" data-slide-to="1"></li>
                    <li data-target="#c" data-slide-to="2"></li>
                    <li data-target="#c" data-slide-to="3"></li>
                    <li data-target="#c" data-slide-to="4"></li>
                </ol>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="static/img/picture/1.png" style="width:800px;height:400px;" class="d-block w-100" alt="...">
                    </div>
                  <div class="carousel-item">
                    <img src="static/img/picture/2.png" style="width:800px;height:400px;" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="static/img/picture/3.png" style="width:800px;height:400px;" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="static/img/picture/4.png" style="width:800px;height:400px;" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="static/img/picture/5.png" style="width:800px;height:400px;" class="d-block w-100" alt="...">
                  </div>
                </div>
                <button class="carousel-control-prev" type="button" data-target="#c" data-slide="prev">
                    <span class="carousel-control-prev-icon"  aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-target="#c" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </button>
            </div>
            <p> 图表操作保留了大部分的图表功能，底部的多功能拖拉框有助于我们选择量程和在观看全局数据的同时分析局部，我们在右上角添加了很多特殊功能旋钮，更加利于用户分析能谱数据。</p>
            <p> 其次是标线功能，我们用不同颜色的标线，来处理数据，更加直观的给用户提供选择。</p>
            <p> 选择区域功能上，我们保留了面积显示，和采用标线功能同样的方式去操作区间。</p>
            <p> 查看数据，可以方便用户保存数据文件;图片保存，可以保存图表框内的表格图像，有利于用户进一步分析数据;刷新可以避免误操作，但同时，刷新并无法去除标线和区域选择。</p>
            <p> 我们在每个数据调节后面都添加了撤回按钮，方便用户反悔操作。当然我们还有锁定按钮和线型按钮，以及我们自定义的颜色选取框。</p>
            <h4 id="list-item-3">算法介绍</h4>
            <p> 因为时间原因，我在算法上并没有进行过多的操作，不过我大致上会从以下几个方面入手：
                <p> (1)峰值查找，半高宽自动给出，和最大值不一样，这个是用于查找能谱峰的。</p>
                <p> (2)AI报告，希望能通过能谱数据结合现有核数据进行比对，通过计算机智能给出一份合适的报告。</p>
                <p> (3)软硬分离，通过部署服务器的方式实现软硬分离，让用户在远程操作硬件，分析实验数据。</p>
            </p>
            <h4 id="list-item-4">联系我们</h4>
            <p>Email:xjp17@mails.tsinghua.edu.cn</p>
            <p>Phone:19851097902</p>
            <p>Gitee:<a href="https://gitee.com/x-jumping/virtual_analyzer">https://gitee.com/x-jumping/virtual_analyzer</a></p>
        </div>
    </div>
      
</body>


<script>

</script>